<template>
    <div class="const flex_column_between">
        <div class="schedule_tit flex_center_between">
            <div class="flex_center">
                <span class="label font24">学习资料 </span>  
            </div>
            <div v-if="list.length>0" class="etext themeFont cur font18" @click="allFn">
                全部<i class="el-icon-arrow-right"></i>
            </div>
        </div>
        <template v-if="list.length > 0">
            <div class="datum_cont" v-loading="loading">
                <div class="cont_item flex_center_between cur" v-for="item in list" @click="jumpFun(item)">
                    <div class="cont_left flex_center">
                    <img src="@/assets/img/data.png" alt="" srcset="">
                    <span class="label font20">{{ item.name }}</span>
                    </div>
                    <div class="cont_right flex_center">
                        <span class="time font16">{{ formatDate(item.createdAt) }}</span>
                        <i style="margin-top: 4px;" class="el-icon-arrow-right"></i>
                    </div>
                </div>
            </div>
        </template>
        <template v-else>
            <empty type="2" text="暂无学习资料"></empty>
        </template>
        
        <bear_dialogVue
            ref="bearDialog"
            title="学习资料"
            :width="'50%'"
            :isUserFooter="false"
            >
            <template v-if="listData.length > 0">
                <div class="container" ref="container">
                    <div ref="inner">
                        <div class="dialog_cont"  v-loading="loading">
                            <div class="cont_item flex_center_between cur" v-for="item in listData" @click="jumpFun(item)">
                                <div class="cont_left flex_center">
                                <img src="@/assets/img/data.png" alt="" srcset="">
                                <span class="label font20">{{ item.name }}</span>
                                </div>
                                <div class="cont_right flex_center">
                                    <span class="time font16">{{ formatDate(item.createdAt) }}</span>
                                    <i style="margin-top: 4px;" class="el-icon-arrow-right"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </template>
            <template v-else>
                <empty type="2" text="暂无学习资料"></empty>
            </template>
            
        </bear_dialogVue> 
    </div>
</template>

<script>
import bear_dialogVue from '@/views/components/bear_dialog.vue'
import { materialList } from '@/api/courseMaterial.js'
export default {
    components:{
        bear_dialogVue
    },
    data() {
        return {
            loading: false,
            isLoading:false,
            list: [],
            listData: [],
            containerHeight: 0,
            innerHeight:0,
            totalPage: 0, // 总页数
            currentPage: 1, // 当前页
            pageSize: 15, // 每页条数
            total: 0, // 总条数
        }
    },
    //页面销毁之前，清除scroll
    destroyed() {
        if(this.$refs.container){
            this.$refs.container.removeEventListener('scroll', this.callBackScroll)
        }
    },
    mounted(){
        this.getList()
        this.getListPage()
    },
    methods:{
        async getList() {
          this.loading = true
          await materialList({
                page: 1,
                pageSize: 4
            }).then(res => {
                this.loading = false
                if (res.error === 0) {
                    this.list = res.data.list
                }
            })
        },
        getListPage() {
            this.isLoading = true
            materialList({
                page: this.currentPage
            }).then(res => {
                this.isLoading = false
                if (res.error === 0) {
                    let totalPage = Math.ceil(res.data.total / res.data.perPage)
					this.totalPage = totalPage
                    this.total = res.data.total
                    this.pageSize = res.data.perPage

                    let allList = this.allList
                    if (this.currentPage == 1) {
                        allList = res.data.list
                    }else{
                        res.data.forEach(item => {
                            allList.push(item)
                        })
                    }

                    this.listData = allList
                }
            }).finally(() => {
                this.isLoading = false
            })
        },
        // 滚动回调函数
        callBackScroll(e) {
            if (this.loading) return
            this.innerHeight = this.$refs.inner.offsetHeight
            let scrollTop = e.target.scrollTop
            // 当滚出去的内容高度加上窗口也就是外部容器的高度大于等于内容高度时发送请求
            if (scrollTop + this.containerHeight >= this.innerHeight) {
                let page2 = this.total % this.pageSize
                if(page2 >= 0 && this.currentPage != this.totalPage){
                    this.currentPage ++
                    this.getListPage();
                }
            }
        },
        jumpFun(row) {
            if (row.link) {
                window.open(row.link)
            }
        },
        formatDate(time) {
            if (time) {
                let createdTime = time.split('-')
                time = createdTime[0] + '.' + createdTime[1] + '.' + createdTime[2]
            }
            return time
        },
        allFn(){
            this.$refs.bearDialog.openDialog();
            // 容器高度
            this.$nextTick(()=>{
                this.containerHeight = this.$refs.container.clientHeight
                // 内容高度
                this.innerHeight = this.$refs.inner.offsetHeight
                // 滚动监听
                this.$refs.container.addEventListener('scroll',this.callBackScroll)
            })
        }
    }
    
}
</script>

<style lang="scss" scoped>
@import "~@/styles/mixins.scss";
.const{
    width: 100%;
    height: 100%;
}
.schedule_tit{
    width: 100%;
    .label{
        font-size: 2.2rem;
        margin-right:2.6rem;
    }
    .etext{
        font-size: 1.8rem;
        .el-icon-arrow-right{
            font-size: 1.6rem;
        }
    }
}  
.dialog_cont{
    // padding: 0 42px;
}
.datum_cont{
    width: 100%;
    flex: 1;
    padding: 2rem 0 0;
    overflow-y: auto;
    &::-webkit-scrollbar {
        width: 6px;
        height: 1px;
    }
    &::-webkit-scrollbar-thumb { 
        border-radius: 5px;
        background-color:#019E69;
    }
    &::-webkit-scrollbar-track { 
        background: #fff;
        border-radius: 5px;
    }
}
.cont_item{
        margin-bottom: 1.2rem;
        img{
            width: 4rem;
            height: 4rem;
        }
    }
    .cont_left{
        color: #3A3F5E;
        font-size: 2rem;
        .label{
            margin-left: 2rem;
        }
    }
    .cont-right{
        color: #626780;
        font-size: 1.6rem;
        .time{
            margin-left: 6px;
        }
        .icon_rigth{
            margin-top: 2px;
        }
    }

    .container{
        overflow-y: auto;
        width: 100%;
        height: 100%;
        flex: 1;
        padding: 2rem;
        overflow-y: auto;
        &::-webkit-scrollbar {
            width: 6px;
            height: 1px;
        }
        &::-webkit-scrollbar-thumb { 
            border-radius: 5px;
            background-color:#019E69;
        }
        &::-webkit-scrollbar-track { 
            background: #fff;
            border-radius: 5px;
        }
        
    }
</style>
